
// 宽度类 (vw)
@for $i from 0 through 100 {
  .w-#{$i}vw {
    width: #{$i}#{'vw'};
  }
}

// 高度类 (vh)
@for $i from 0 through 100 {
  .h-#{$i}vh {
    height: #{$i}#{'vh'};
  }
}

// 宽度类 (百分比)
@for $i from 0 through 100 {
  .w-#{$i}\% {
    width: #{$i}#{'%'};
  }
}

// 高度类 (百分比)
@for $i from 0 through 100 {
  .h-#{$i}\% {
    height: #{$i}#{'%'};
  }
}

// 宽度类 (像素)
@for $i from 0 through 1920 {
  .w-#{$i}px {
    width: #{$i}px;
  }
}

// 高度类 (像素)
@for $i from 0 through 1080 {
  .h-#{$i}px {
    height: #{$i}px;
  }
}

// 宽高度类 (像素)
@for $i from 0 through 1080 {
  .wh-#{$i}px {
    width: #{$i}px;
    height: #{$i}px;
  }
}

// 内边距类 (像素)
@for $i from 0 through 100 {
  .p-#{$i}px {
    padding: #{$i}px;
  }
}

// 单边内边距
@for $i from 0 through 100 {
  .pt-#{$i}px {
    padding-top: #{$i}px;
  }
  .pr-#{$i}px {
    padding-right: #{$i}px;
  }
  .pb-#{$i}px {
    padding-bottom: #{$i}px;
  }
  .pl-#{$i}px {
    padding-left: #{$i}px;
  }
  .px-#{$i}px {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
  .py-#{$i}px {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}

// 外边距类 (像素)
@for $i from 0 through 100 {
  .m-#{$i}px {
    margin: #{$i}px;
  }
}

// 单边外边距
@for $i from 0 through 100 {
  .mt-#{$i}px {
    margin-top: #{$i}px;
  }
  .mr-#{$i}px {
    margin-right: #{$i}px;
  }
  .mb-#{$i}px {
    margin-bottom: #{$i}px;
  }
  .ml-#{$i}px {
    margin-left: #{$i}px;
  }
  .mx-#{$i}px {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
  .my-#{$i}px {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}

// 负边距
@for $i from 1 through 20 {
  .-m-#{$i}px {
    margin: -#{$i}px;
  }
  .-mx-#{$i}px {
    margin-left: -#{$i}px;
    margin-right: -#{$i}px;
  }
  .-my-#{$i}px {
    margin-top: -#{$i}px;
    margin-bottom: -#{$i}px;
  }
}

// 百分比圆角
@for $i from 0 through 100 {
  .radius-#{$i}\% {
    border-radius: #{$i}#{'%'};
  }
}

// 统一圆角 (像素)
@for $i from 0 through 100 {
  .radius-#{$i}px {
    border-radius: #{$i}px;
  }
}

// 四角分别设置 (像素)
@for $i from 0 through 100 {
  .radius-t#{$i} {
    border-top-left-radius: #{$i}px;
    border-top-right-radius: #{$i}px;
  }
  .radius-r#{$i} {
    border-top-right-radius: #{$i}px;
    border-bottom-right-radius: #{$i}px;
  }
  .radius-b#{$i} {
    border-bottom-right-radius: #{$i}px;
    border-bottom-left-radius: #{$i}px;
  }
  .radius-l#{$i} {
    border-top-left-radius: #{$i}px;
    border-bottom-left-radius: #{$i}px;
  }
}

@for $i from 0 through 100 {
  .font-s#{$i} {
    font-size: #{$i}px;
  }
}

// 字体粗细
@for $i from 1 through 9 {
  .font-w#{$i * 100} {
    font-weight: $i * 100;
  }
}

// 透明度
@for $i from 1 through 10 {
  .opacity-#{$i} {
    opacity: $i * 0.1;
  }
}

// 层级控制类
@for $i from 0 through 10 {
  .z-index-#{$i} {
    z-index: $i;
  }
}

// 背景黑色透明类
@for $i from 0 through 10 {
  .bg-block-#{$i} {
    background-color: rgba(0, 0, 0, $i * 0.1);
  }
}

// 背景白色透明类
@for $i from 0 through 10 {
  .bg-white-#{$i} {
    background-color: rgba(255, 255, 255, $i * 0.1);
  }
}

// 文字黑色透明类
@for $i from 0 through 10 {
  .font-block-#{$i} {
    color: rgba(0, 0, 0, $i * 0.1);
  }
}

// 文字白色透明类
@for $i from 0 through 10 {
  .font-white-#{$i} {
    color: rgba(255, 255, 255, $i * 0.1);
  }
}

//定位
$positions: top, right, bottom, left;
@each $position in $positions {
  @for $i from 0 through 120 {
    .#{$position}-#{$i * 4}px {
      #{$position}: #{$i * 4}px;
    }
  }
}
